<template>
	<view class="h-screen flex flex-col">
		<uni-nav-bar title="档案列表" fixed statusBar backgroundColor="transparent" :border="false" left-icon="left"
			@clickLeft="back"></uni-nav-bar>
		<view class="px-30">
			<view class="box-btn flex mb-20">
				<view class="left flex items-center justify-center text-white">
					<text>档案列表</text>
				</view>
				<view class="right flex items-center justify-center text-white" @click="ToArchiveAdd()">
					<text>添加档案</text>
				</view>
			</view>
			<view class="box-search flex mb-20">
				<uni-easyinput class="flex-1 rounded-full overflow-hidden border-2 border-[#BADEFF]" :inputBorder="false"
					v-model="nickname" placeholder="可用首字母" />
				<view class="btn-search ml-10" @click="handleSearch"></view>
			</view>
			<view class="box-sorting flex mb-20">
				<view class="btn-up mr-30 flex items-center justify-center" :class="{active: sort==0}" @click="handleSort(0)">
					<text>添加时间升序</text>
					<ImageBoxVue v-if="sort==0" src="/static/test/up_w.png" width="7rpx" height="20rpx">
					</ImageBoxVue>
					<ImageBoxVue v-else src="/static/test/up_b.png" width="7rpx" height="20rpx"></ImageBoxVue>
				</view>
				<view class="btn-down flex items-center justify-center" :class="{active: sort==1}" @click="handleSort(1)">
					<text>添加时间降序</text>
					<ImageBoxVue v-if="sort==1" src="/static/test/down_w.png" width="7rpx" height="20rpx">
					</ImageBoxVue>
					<ImageBoxVue v-else src="/static/test/down_b.png" width="7rpx" height="20rpx"></ImageBoxVue>
				</view>
			</view>
		</view>
		<view class="flex-1 overflow-hidden">
			<scroll-view scroll-y="true" class="h-full">
				<view class="px-30">
					<view class="user-item flex items-center mb-30" v-for="e,i in archiveList" :key="i" @click="handleSelect(i)">
						<view class="flex justify-center items-center mr-20" v-if="!!needCount">
							<ImageBoxVue v-if="selects.includes(i)" src="/static/icons/selected.png" width="36rpx" height="36rpx">
							</ImageBoxVue>
							<ImageBoxVue v-else src="/static/icons/no_selected.png" width="36rpx" height="36rpx">
							</ImageBoxVue>
						</view>
						<view class="rounded-full overflow-hidden">
							<ImageBoxVue v-if="e.relat == 0" :src="userInfo.headimg" width="120rpx" height="120rpx"></ImageBoxVue>
							<ImageBoxVue v-else-if="e.gender == 0" src="/static/imgs/img_w_man.png" width="120rpx" height="120rpx">
							</ImageBoxVue>
							<ImageBoxVue v-else src="/static/imgs/img_man.png" width="120rpx" height="120rpx"></ImageBoxVue>
						</view>
						<view class="box-info flex-1 flex items-center bg-white">
							<view class="flex-1">
								<view class="flex items-center" style="gap: 30rpx;">
									<text class="text-sm font-bold">{{e.nickname}}</text>
								</view>
								<view class="flex items-center my-10">
									<ImageBoxVue src="/static/test/icon_w_man.png" width="17rpx" height="26rpx" v-if="e.gender == 0">
									</ImageBoxVue>
									<ImageBoxVue src="/static/test/icon_man.png" width="21rpx" height="21rpx" v-else></ImageBoxVue>
									<view class="ml-8">{{dayjs(e.birthday).format('YYYY.MM.DD')}}</view>
								</view>
							</view>
							<view class="flex items-center">
								<view class="btn-del flex items-center justify-center text-white" @click.stop="handleDel(e.id)">
									<text>删除</text>
								</view>
								<view class="btn-edit flex items-center justify-center text-white" @click.stop="ToArchiveAdd(e.id)">
									<text>编辑</text>
								</view>
								<view class="btn-identity flex items-center text-white">
									<text>{{config.relatList[e.relat]}}</text>
								</view>
							</view>
							<!-- <view>
								<text>{{e.birthpro}}</text>
								<text>{{e.birthcity}}</text>
								<text>{{e.birthdis}}</text>
								<text class="mx-10">|</text>
								<text>{{e.respro}}</text>
								<text>{{e.rescity}}</text>
								<text>{{e.resdis}}</text>
							</view> -->
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="px-30 py-20" @click="Confirm" v-if="!!needCount">
			<view class="confirm flex justify-center">选择完成</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		getCurrentInstance
	} from 'vue';
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app"
	import dayjs from "dayjs"
	import config from '@/config';
	import userApi from '@/apis/apiList/userApi';
	const from = ref("") // 来源（上级页面）
	const tab = ref("")
	const nickname = ref("")
	const archiveId = ref()
	const userInfo = ref({})
	const archiveList = ref([])
	const sort = ref(0)
	const startData = ref({})
	const membergetDosslist = () => {
		userApi.membergetDosslist({
			"member.id": uni.getStorageSync('user').id,
			nickname: nickname.value,
			sidx: sort.value
		}).then(res => {
			archiveList.value = res.data
		})
	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	onMounted(() => {
		const instance = getCurrentInstance().proxy
		const eventChannel = instance.getOpenerEventChannel();

		eventChannel.on('acceptDataFromOpenerPage', function(data) {
			console.log('acceptDataFromOpenerPage', data)
			startData.value = data
		})
	})

	const needCount = ref(null)
	onLoad((options) => {
		userInfo.value = uni.getStorageSync('user')
		if (options.needCount) {
			needCount.value = Number(options.needCount)
		}
		if (options.from) {
			from.value = options.from
		}
		if (options.tab) {
			tab.value = options.tab
		}
	})
	onShow(() => {
		membergetDosslist()
	})

	const handleSearch = () => {
		membergetDosslist()
	}

	const handleSort = (val) => {
		if (sort.value != val) {
			sort.value = val
			membergetDosslist()
		}
	}

	const selects = ref([])

	function handleSelect(index) {
		if (selects.value.includes(index)) {
			selects.value.splice(selects.value.indexOf(index), 1)
		} else {
			if (needCount.value == 1 && selects.value.length == 1) {
				uni.showToast({
					title: '最多选择1个',
					icon: 'none'
				})
				return
			}
			if (needCount.value == 2 && selects.value.length == 2) {
				uni.showToast({
					title: '最多选择2个',
					icon: 'none'
				})
				return
			}
			if (selects.value.length > 1) {
				uni.showToast({
					title: '最多选择两个',
					icon: 'none'
				})
			} else {
				selects.value.push(index)
			}
		}
		if (needCount.value == 1) {
			if (uni.astrolabePage) {
				uni.astrolabePage({
					'0': {
						id: archiveList.value[index].id,
						name: archiveList.value[index].nickname,
						location: '',
						longitude: archiveList.value[index].birlongitude,
						latitude: archiveList.value[index].birlatitude,
						tz: archiveList.value[index].timezone,
						birth: dayjs(archiveList.value[index].birthday).format('YYYY-MM-DD HH:mm:ss'),
						reslongitude: archiveList.value[index].reslongitude,
						reslatitude: archiveList.value[index].reslatitude,
						relat: archiveList.value[index].relat,
						gender: archiveList.value[index].gender,
					}
				})
				let wait = setTimeout(() => {
					if (from.value == 'tools') {
						uni.navigateTo({
							url: ``
						})
					} else {
						uni.navigateBack()
					}
					clearTimeout(wait)
				}, 50)
			}
		} else {}
	}

	function Confirm() {
		if (selects.value.length < needCount.value) {
			uni.showToast({
				title: `请选择${needCount.value}个`,
				icon: 'none'
			})
			return
		}
		if (from.value == 'tools') {
			console.log(startData.value)
			if (needCount.value == 1) {
				uni.navigateTo({
					url: `/pages/test/astrolabeSingleTools?tab=${tab.value}&ids=${archiveList.value[selects.value[0]].id}`,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('astrolabeSinglePage', startData.value)
					}
				})
			} else {
				uni.navigateTo({
					url: `/pages/test/astrolabeDoubleTools?tab=${tab.value}&ids=${archiveList.value[selects.value[0]].id},${archiveList.value[selects.value[1]].id}`,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('astrolabeDoublePage', startData.value)
					}
				})
			}
		} else if (from.value == 'quick') {
			if (needCount.value == 1) {
				uni.navigateTo({
					url: `/pages/test/astrolabeSingle?tab=${tab.value}&ids=${archiveList.value[selects.value[0]].id}`,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('astrolabeSinglePage', startData.value)
					}
				})
			} else {
				uni.navigateTo({
					url: `/pages/test/astrolabeDouble?tab=${tab.value}&ids=${archiveList.value[selects.value[0]].id},${archiveList.value[selects.value[1]].id}`,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('astrolabeDoublePage', startData.value)
					}
				})
			}
		} else {
			uni.astrolabePage({
				'0': {
					name: archiveList.value[selects.value[0]].nickname,
					location: '',
					longitude: archiveList.value[selects.value[0]].birlongitude,
					latitude: archiveList.value[selects.value[0]].birlatitude,
					tz: archiveList.value[selects.value[0]].timezone,
					birth: dayjs(archiveList.value[selects.value[0]].birthday).format('YYYY-MM-DD HH:mm:ss'),
					relat: archiveList.value[selects.value[0]].relat,
					gender: archiveList.value[selects.value[0]].gender,
				},
				'1': {
					name: archiveList.value[selects.value[1]].nickname,
					location: '',
					longitude: archiveList.value[selects.value[1]].birlongitude,
					latitude: archiveList.value[selects.value[1]].birlatitude,
					tz: archiveList.value[selects.value[1]].timezone,
					birth: dayjs(archiveList.value[selects.value[1]].birthday).format('YYYY-MM-DD HH:mm:ss'),
					relat: archiveList.value[selects.value[1]].relat,
					gender: archiveList.value[selects.value[1]].gender,
				}
			})
			let wait = setTimeout(() => {
				uni.navigateBack()
				clearTimeout(wait)
			}, 50)
		}
	}

	const handleDel = (id) => {
		console.log(id)
		const opt = {
			id: id
		}
		userApi.memberDelDoss(opt).then(() => {
			membergetDosslist()
		})
	}

	function ToArchiveAdd(id) {
		console.log(id)
		if (id) {
			uni.navigateTo({
				url: `/pages/views/archiveAdd${id ? `?id=${id}` : ''}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/views/archiveAdd`
			})
		}
	}
</script>

<style lang="scss" scoped>
	.box-btn {
		.left {
			background: url(/static/test/bg_left.png) no-repeat;
			background-size: cover;
			width: 352rpx;
			height: 64rpx;
		}

		.right {
			background: url(/static/test/bg_right.png) no-repeat;
			background-size: cover;
			width: 354rpx;
			height: 64rpx;
			margin-left: -16rpx;
		}
	}

	.box-search {
		.btn-search {
			background: url(/static/test/btn_search.png) no-repeat;
			background-size: cover;
			width: 162rpx;
			height: 68rpx;
		}
	}

	.box-sorting {

		.btn-up,
		.btn-down {
			flex: 1;
			background: #FFFFFF;
			border-radius: 120rpx 120rpx 120rpx 120rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #333333;
			line-height: 32rpx;
			height: 52rpx;

			text {
				margin-right: 8rpx;
			}

			&.active {
				background: linear-gradient(90deg, #D5CEFF 0%, #65B5FF 100%);
				border-radius: 120rpx 120rpx 120rpx 120rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 32rpx;
			}
		}
	}

	:root {
		--confirm-height: 100rpx;
		--bottom: 50rpx;
	}

	.confirm {
		background: url(/static/test/btn_pay_blue.png) no-repeat;
		background-size: cover;
		height: 90rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
		padding-top: 14rpx;
	}

	.button-placeholder {
		height: calc(var(--confirm-height) + var(--bottom));
	}

	.user-item {
		.box-info {
			margin-left: -56rpx;
			background: #FFFFFF;
			border-radius: 100rpx 20rpx 20rpx 100rpx;
			padding-left: 82rpx;
			height: 120rpx;

			.btn-del {
				width: 80rpx;
				height: 52rpx;
				background: linear-gradient(90deg, #FFBB95 0%, #FF9F99 100%);
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				margin-right: 14rpx;
			}

			.btn-edit {
				width: 80rpx;
				height: 52rpx;
				background: linear-gradient(90deg, #99E1FF 0%, #87BEFC 100%);
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				margin-right: 14rpx;
			}

			.btn-identity {
				width: 111rpx;
				height: 52rpx;
				background: url(/static/icons/identity.png) no-repeat;
				background-size: cover;
				padding-left: 40rpx;
				box-sizing: border-box;
			}
		}
	}
</style>